<template>
  <Row>
    <Col span="24">
      <MyCard></MyCard>
    </Col>
    <Col span="24">
      <div class="whitebg notice">
        <h2 class="htitle">最近更新</h2>
        <ul>
          <li>
            <router-link to="" title="渐渐习惯了，没有你的生活">
              渐渐习惯了，没有你的生活，
            </router-link>
          </li>
          <li>
            <router-link to="" title="前端MVVM框架之“Vue.js组件篇”">
              前端MVVM框架之“Vue.js组件篇”
            </router-link>
          </li>
          <li>
            <router-link to="" title="人不可缺少自己的道，要有一颗“利他之心”">
              人不可缺少自己的道，要有一颗“利他之心”
            </router-link>
          </li>
          <li>
            <router-link
              to=""
              title="想要做成一件事，除了勤奋，还需要专注与热爱，三者缺一不可。这样才有可能会成功！"
            >
              想要做成一件事，除了勤奋，还需要专注与热爱，三者缺一不可。这样才有可能会成功！
            </router-link>
          </li>
        </ul>
      </div>
    </Col>
    <Col span="24">
      <div class="whitebg paihang">
        <h2 class="htitle">点击排行</h2>
        <section class="topnews imgscale">
          <router-link to="" title="娱乐的游戏不值得你伤心费神">
            <img
              src="https://img1.baidu.com/it/u=2567778653,898240793&fm=26&fmt=auto&gp=0.jpg"/>
            <span>娱乐的游戏不值得你伤心费神</span>
          </router-link>
        </section>
        <ul>
          <li>
            <i></i>
             <router-link to="" title="当你回忆从前时你哭了，说明你成熟了；">
                 当你回忆从前时你哭了，说明你成熟了；
            </router-link>
          </li>
          <li>
            <i></i>
             <router-link to="" title="vue-router 中 router-link 与 a 标签的区别">
                 vue-router 中 router-link 与 a 标签的区别
            </router-link>
          </li>
          <li>
            <i></i>
             <router-link to="" title="三步实现滚动条触动css动画效果">
                 三步实现滚动条触动css动画效果
            </router-link>
          </li>
          <li>
            <i></i>
             <router-link to="" title="关于响应式Web设计技巧以及入门">
                 关于响应式Web设计技巧以及入门
            </router-link>
          </li>
        </ul>
      </div>
      <!--paihang end-->
    </Col>
    <Col span="24">
      <!--tuijian-->
      <div class="whitebg tuijian">
        <h2 class="htitle">博主推荐</h2>
        <section class="topnews imgscale">
          <a href=""
            ><img src="https://img1.baidu.com/it/u=1354373638,952450593&fm=26&fmt=auto&gp=0.jpg" />
            <span> 闲谈、静心 </span>
          </a>
        </section>
        <ul>
          <li>
              <router-link to="" title="也有些人，浓烈如酒，疯狂似醉，却是醒来无处觅，来去都如风，梦过无痕。">
                  <i><img src="https://img0.baidu.com/it/u=414551042,3284936695&fm=26&fmt=auto&gp=0.jpg" /></i>
                  也有些人，浓烈如酒，疯狂似醉，却是醒来无处觅，来去都如风，梦过无痕。
              </router-link>
          </li>
          <li>
              <router-link to="" title="春山夜，且听轻风语">
                  <i><img src="https://img2.baidu.com/it/u=3681880960,455182084&fm=26&fmt=auto&gp=0.jpg" /></i>
                  春山夜，且听轻风语
              </router-link>
          </li>
          <li>
              <router-link to="" title="关于程序员那点事">
                  <i><img src="https://img1.baidu.com/it/u=1361135963,570304265&fm=26&fmt=auto&gp=0.jpg" /></i>
                  关于程序员那点事
              </router-link>
          </li>
          <li>
              <router-link to="" title="为API生，为框架死">
                  <i><img src="https://blog.yzmcms.com/uploads/20170207/14864355998212.gif" /></i>
                  为API生，为框架死
              </router-link>
          </li>
          
        </ul>
      </div>
    </Col>
    <Col span="24">
      <TAG></TAG>
    </Col>
    <Col span="24">
      <GuseeLike></GuseeLike>
    </Col>
  </Row>
</template>

<script>
import MyCard from "./public/MyCard";
import TAG from "@/components/list/TAG";
import GuseeLike from "@/components/list/GuseeLike";
export default {
  name: "Sider",
  data() {
    return {};
  },
  components: {
    GuseeLike,
    MyCard,
    TAG
  },
};
</script>

<style scoped>
</style>
